<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-select v-model="listQuery.category" placeholder="请选择" clearable class="filter-item">
        <el-option-group v-for="group in categoryOptions"
                         :key="group.id" :label="group.name">
          <el-option v-for="item in group.children"
            :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-option-group>
      </el-select>


      <el-select clearable class="filter-item" style="width: 130px" v-model="listQuery.status" placeholder="状态">
        <el-option v-for="item in  statusOptions" :key="item.key" :label="item.label" :value="item.code">
        </el-option>
      </el-select>

      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加</el-button>
    </div>

    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row style="width: 100%">
      <el-table-column align="center" width="50" label="序号">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>

      <el-table-column width="120" label="标题" >
        <template slot-scope="scope">
          <span>{{scope.row.title}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="50" label="分类">
        <template slot-scope="scope">
          <span>{{scope.row.category_id}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="50" label="分组" >
        <template slot-scope="scope">
          <span>{{scope.row.group}}</span>
        </template>
      </el-table-column>

      <el-table-column width="100" label="关键字" prop="keyword"></el-table-column>
      <el-table-column label="摘要" prop="abstract" ></el-table-column>

      <el-table-column width="80" align="center" label="发布者" >
        <template slot-scope="scope">
          <span>{{scope.row.source}}</span>
        </template>
      </el-table-column>

      <el-table-column width="50" align="center" label="阅读" >
        <template slot-scope="scope">
          <span>{{scope.row.favor}}</span>
        </template>
      </el-table-column>

      <el-table-column width="70" class-name="status-col" label="状态" >
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusTagFilter">{{scope.row.status | statusTextFilter}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="150px" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button v-if="scope.row.status==-1" size="mini" type="warning" @click="handleDelete(scope.row)">恢复</el-button>
          <el-button v-else size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
  import { fetchList, options, deleteArticle } from '@/api/article'
  import waves from '@/directive/waves' // 水波纹指令

  const statusOptions = [
    { key: 'success', label: '正常', code: 1 },
    { key: 'warning', label: '异常', code: 0 },
    { key: 'info', label: '草稿', code: 2 },
    { key: 'danger', label: '删除', code: -1 }
  ]
  const statusKeyValue = statusOptions.reduce((acc, cur) => {
    acc[cur.code] = { tag: cur.key, txt: cur.label }
    return acc
  }, {})

  export default {
    name: 'articles',
    directives: {
      waves
    },
    data() {
      return {
        tableKey: 0,
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
          title: undefined,
          type: undefined,
          status: undefined
        },
        statusOptions,
        categoryOptions: [],
        showReviewer: false
      }
    },
    filters: {
      statusTagFilter(status) {
        return statusKeyValue[status].tag
      },
      statusTextFilter(status) {
        return statusKeyValue[status].txt
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        const $vm = this
        this.axios.all([options(), fetchList()]).then(this.axios.spread(function(categories, list) {
          $vm.categoryOptions = categories
          $vm.list = list.items
          $vm.total = list.total
          $vm.listLoading = false
        }))
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      handleCreate() {
        this.$router.push('create')
      },
      handleUpdate(row) {
        // const id = row.id
        // 跳转到指定的路由
      },
      handleDelete(row) {
        const status = row.status === 1
        deleteArticle(row.id, status).then(() => {
          this.$notify({
            title: '成功',
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
          row.status = status ? -1 : 1
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .form-row{
    /*display: table;*/
    position: relative;
  }
  .form-row:after {
    clear: both;
  }
  .form-row:after, .form-row:before {
    display: table;
    content: "";
  }
</style>
